<template> 
<router-link to="/">返回</router-link>
    <div class="job-posting">  
      <h3>公司名称</h3>  
      <input type="text" v-model="companyName" placeholder="">  
        
      <h3>职位名称</h3>  
      <input type="text" v-model="positionName" placeholder="">  
        
      <h3>公司规模：</h3>  
      <input type="text" v-model="companySize" placeholder="">  
        
      <h3>联系方式：</h3>  
      <input type="text" v-model="contactInformation" placeholder="">  
        
      <h3>职位描述</h3>  
      <textarea v-model="jobDescription" ></textarea>  
        
      <h3>学历要求</h3>  
      <input type="text" v-model="educationRequirement" placeholder="">  
        
      <h3>专业技能</h3>  
      <input type="text" v-model="skills" placeholder="">  
        
      <h3>薪资范围</h3>  
      <input type="text" v-model="salaryRange" placeholder="">  
        <br>
      <button @click="submitJob">提交</button>  
    </div>  
  </template>  
    
    
<script>   
export default {    
  data() {    
    return {    
      companyName: '',    
      positionName: '',    
      companySize: '',    
      contactInformation: '',    
      jobDescription: '',    
      educationRequirement: '',    
      skills: '',    
      salaryRange: ''    
    }   
  },   
  computed: {   
    jobPostingData() {   
      return {   
        companyName: this.companyName,   
        positionName: this.positionName,   
        companySize: this.companySize,   
        contactInformation: this.contactInformation,   
        jobDescription: this.jobDescription,   
        educationRequirement: this.educationRequirement,   
        skills: this.skills,   
        salaryRange: this.salaryRange   
      }   
    }   
  },   
  methods: {    
    submitJob() {    
      // 表单验证   
      let validationError = false;   
      Object.keys(this.jobPostingData).forEach((key) => {   
        if (!this.jobPostingData[key]) {   
          console.log(`字段 ${key} 为必填项`);   
          validationError = true;   
        }   
      });   
      if (validationError) return;   
      // 在这里处理表单提交逻辑，例如发送招聘信息到服务器或执行其他操作。    
      console.log('招聘信息已提交：', this.jobPostingData);   
      // 清空输入框   
      this.clearForm();   
    },   
    clearForm() {   
      this.companyName = '';   
      this.positionName = '';   
      this.companySize = '';   
      this.contactInformation = '';   
      this.jobDescription = '';   
      this.educationRequirement = '';   
      this.skills = '';   
      this.salaryRange = '';   
    }   
  }    
}   
</script>
  <style>
.job-posting {  
  width: 600px;  
  margin: 0 auto;  
  padding: 20px;  
  border: 1px solid #ccc;  
  border-radius: 5px;  
}  
  
.job-posting h1, .job-posting h2 {  
  margin-top: 0;  
  text-align: center;  
}  
  
.job-posting input[type="text"], .job-posting textarea {  
  width: 100%;  
  padding: 10px;  
  margin-bottom: 10px;  
  border: 1px solid #ccc;  
  border-radius: 3px;  
  box-sizing: border-box;  
}  
  
.job-posting button {  
  width: 100%;  
  padding: 10px;  
  background-color: #4CAF50;  
  color: white;  
  border: none;  
  cursor: pointer;  
}
</style>